<template>
    <div class="drawer">
        <el-drawer
            v-model="visible"
            :direction="direction"
            :custom-class="customClass"
            :size="width"
            :append-to-body="appendToBody"
            :show-close="showClose"
            :modal="modal"
            :center="center"
            :disabled="disabled"
            :click-modal-close="clickModalClose"
            @on-close="close"
        >
            <template v-if="title" #header>
                <h3>{{ title }}</h3>
            </template>
            <!-- 使用插槽而不是默认内容 -->
            <slot>
                <span v-if="content">{{ content }}</span>
            </slot>
            <template #footer>
                <div style="flex: auto">
                    <el-button v-if="cancelButtonText" @click="handleEvent('cancel')">
                        {{ cancelButtonText }}
                    </el-button>
                    <el-button
                        v-if="confirmButtonText"
                        type="primary"
                        @click="handleEvent('confirm')"
                    >
                        {{ confirmButtonText }}
                    </el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick, provide } from 'vue';

export default defineComponent({
    props: {
        title: {
            // 弹窗标题
            type: String,
            default: ''
        },
        content: {
            // 弹窗内容
            type: String,
            default: ''
        },
        confirmButtonText: {
            // 确认按钮内容
            type: String,
            default: '确定'
        },
        cancelButtonText: {
            // 取消按钮内容
            type: String,
            default: '取消'
        },
        width: {
            // 弹窗的宽度
            type: String,
            default: '400px'
        },
        disabled: {
            // 是否禁用
            type: Boolean,
            default: false
        },
        async: {
            // 是否开启异步关闭
            type: Boolean,
            default: false
        },
        clickModalClose: {
            // 点击遮罩层关闭对话窗口
            type: Boolean,
            default: true
        },
        center: {
            // 是否居中布局
            type: Boolean,
            default: false
        },
        customClass: {
            type: String,
            default: ''
        },
        direction: {
            type: String,
            default: 'rtl'
        },
        modal: {
            type: Boolean,
            default: true
        },
        appendToBody: {
            type: Boolean,
            default: false
        },
        showClose: {
            type: Boolean,
            default: true
        }
    },
    emits: ['confirm', 'cancel', 'close', 'open'],
    setup(props, { emit }) {
        const visible = ref(false)

        const handleEvent = (type: 'confirm' | 'cancel') => {
            emit(type)
            if (!props.async || type === 'cancel') {
                close()
            }
        }

        const close = () => {
            visible.value = false
            nextTick(() => {
                emit('close')
            })
        }

        const open = () => {
            if (props.disabled) {
                return
            }
            nextTick(() => {
                emit('open')
                visible.value = true
            })
        }

        provide('visible', visible)

        return {
            visible,
            handleEvent,
            close,
            open
        }
    }
})
</script>

<style scoped lang="scss"></style>
